<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title th:text="${title}">购物车 - 点餐系统</title>
    <link rel="stylesheet" th:href="@{/css/element-ui.css}">
    <link rel="stylesheet" th:href="@{/css/style.css}">
</head>
<body>
<div id="app">
    <div class="header">
        <div class="header-back" @click="goBack">
            <i class="el-icon-arrow-left"></i>
        </div>
        <div class="header-title" th:text="${title}">购物车</div>
    </div>

    <div class="cart-container">
        <div class="cart-list">
            <div v-for="(item, index) in cartItems" :key="index" class="cart-item">
                <div class="cart-item-info">
                    <div class="cart-item-name">{{ item.name }}</div>
                </div>
                <div class="cart-item-actions">
                    <button class="quantity-btn" @click="decreaseQuantity(index)">-</button>
                    <span class="quantity">{{ item.quantity }}</span>
                    <button class="quantity-btn" @click="increaseQuantity(index)">+</button>
                    <button class="remove-btn" @click="removeItem(index)">
                        <i class="el-icon-delete"></i>
                    </button>
                </div>
            </div>
        </div>

        <div v-if="cartItems.length === 0" class="empty-cart">
            <div class="empty-icon">🛒</div>
            <div class="empty-text">购物车是空的</div>
            <button class="back-to-shop" @click="goBack">去点餐</button>
        </div>
    </div>

    <div class="checkout-footer" v-if="cartItems.length > 0">
        <button class="clear-cart-btn" @click="clearCart">清空购物车</button>
        <button class="checkout-btn" @click="goToOrder">提交订单</button>
    </div>
</div>

<script th:src="@{/lib/vue.js}"></script>
<script th:src="@{/lib/element-ui.js}"></script>
<script th:src="@{/lib/axios.js}"></script>
<script th:src="@{/lib/api.js}"></script>
<script th:src="@{/js/front/cart.js}"></script>
</body>
</html>